<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试用例生成系统</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="light-theme">
    <div class="container">
        <!-- 左侧导航栏 -->
        <nav class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <h2><i class="fas fa-vial"></i> 测试用例生成</h2>
                <button class="sidebar-toggle" id="sidebarToggle">
                    <i class="fas fa-chevron-left"></i>
                </button>
            </div>
            
            <div class="sidebar-content">
                <button class="new-chat-btn">
                    <i class="fas fa-plus"></i>
                    <span>新对话</span>
                </button>
                
                <div class="chat-history">
                    <h3>历史对话</h3>
                    <div class="chat-list" id="chatList">
                        <!-- 对话列表将通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>
            
            <div class="sidebar-footer">
                <button class="settings-btn">
                    <i class="fas fa-cog"></i>
                    <span>设置</span>
                </button>
            </div>
        </nav>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 顶部栏 -->
            <header class="top-bar">
                <div class="top-actions">
                    <button class="theme-toggle" id="themeToggle">
                        <i class="fas fa-moon"></i>
                    </button>
                    <button class="user-menu">
                        <i class="fas fa-user"></i>
                    </button>
                </div>
            </header>

            <!-- 聊天区域 -->
            <div class="chat-area">
                <!-- 欢迎语，仅首次进入页面显示 -->
                <div class="welcome-tip" id="welcomeTip">
                    <div class="welcome-title">我是测试用例生成助手,很高兴见到你！</div>
                    <div class="welcome-desc">我可以帮你生成测试用例，快上传需求文档，把你的任务交给我吧~</div>
                </div>
                <div class="chat-messages" id="chatMessages">
                    <!-- 消息内容会动态添加 -->
                </div>

                <div class="chat-input-outer">
                    <div class="chat-input-inner">
                        <div class="chat-input-main">
                            <textarea id="messageInput" class="message-input" placeholder="输入你的问题或上传需求文档..." rows="1"></textarea>
                        </div>
                        <div class="chat-input-actions">
                            <div class="chat-input-actions-left">
                                <button class="mode-btn active" data-mode="full">
                                    <i class="fas fa-list"></i> 全量
                                </button>
                                <button class="mode-btn" data-mode="feature">
                                    <i class="fas fa-star"></i> 功能点
                                </button>
                            </div>
                            <div class="chat-input-actions-right">
                                <button class="upload-btn" id="uploadBtn">
                                    <span class="upload-icon"><i class="fas fa-paperclip"></i></span>
                                    <span class="upload-loading" style="display:none;"><i class="fas fa-spinner fa-spin"></i></span>
                                </button>
                                <button class="send-btn" id="sendBtn">
                                    <i class="fas fa-arrow-up"></i>
                                </button>
                            </div>
                        </div>
                        <div class="file-info" id="fileInfo" style="display: none;">
                            <i class="fas fa-file"></i>
                            <span id="fileName"></span>
                            <span id="fileSize" class="file-size"></span>
                            <button class="remove-file" id="removeFile">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 隐藏的文件输入 -->
        <input type="file" id="fileInput" accept=".doc,.docx" style="display: none;">
    </div>

    <!-- 添加下载功能所需的库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>
    <script src="main.js"></script>
</body>
</html>
